<template>
    <div  class="wrapper-fixed">
        <div class="action-bar-wrapper">
            <el-col :span="24" class="action-bar">
            <el-input v-model="searchText" placeholder="用户姓名或手机号" style="width:300px"></el-input>
            <el-select v-model="authStatusOption"  clearable placeholder="审核状态" style="margin:0 20px;">
                <el-option
                v-for="item in authStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
                <el-button type="primary" size="medium" @click="search">检索</el-button>
                <!-- <el-button type="primary" size="medium" @click="toVipCompanyEditor('')">添加</el-button> -->
            </el-col>
        </div>

        <!-- 列表 -->
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="realname"
                label="姓名"
                show-overflow-tooltip
                width="100"
                >
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机"
                show-overflow-tooltip
                width="100"
                >
            </el-table-column>
            
            <el-table-column
                prop="name"
                label="单位名称"
                show-overflow-tooltip
                width="180">
            </el-table-column>
            <el-table-column
                prop="status_name"
                label="单位地址"
                show-overflow-tooltip
                width="180"
                >
                <template slot-scope="scope">
                    <div style="whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis;">
                        {{scope.row.province}}{{scope.row.city}}{{scope.row.area}}{{scope.row.address}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="营业执照"
                show-overflow-tooltip
                width="100"
                >
                <template  slot-scope="scope" >
                    <el-button type="primary" size="mini" @click="showLicense(scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="提交时间"
                show-overflow-tooltip
                width="150"
                >
            </el-table-column>
            <el-table-column
                prop="status_name"
                label="审核状态"
                show-overflow-tooltip
                width="150"
                >
                <template slot-scope="scope" >
                    <div>
                        <el-tag v-show="scope.row.is_auth==0">未审核</el-tag>
                        <el-tag type="success" v-show="scope.row.is_auth==1">已通过</el-tag>
                        <el-tag type="info" v-show="scope.row.is_auth==2">已拒绝</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="审核" width='150'>
                <template slot-scope="scope">
                    <el-button type='primary' v-if="scope.row.is_auth==0" size="mini"  @click="passApplication(scope.row.id)" >通过</el-button>
                    <el-button type='danger' v-if="scope.row.is_auth==0" size="mini" @click="denyApplication(scope.row.id)" >拒绝</el-button>
                </template>
            </el-table-column>
            
        </el-table>
        <el-col :span="24" class="footer-bar">
            <div class="page-code">
                <el-pagination
                    background
                    :page-size="16"
                    layout="prev, pager, next"
                    :total="totalPage"
                    @current-change="pageChange"
                        >
                </el-pagination>
            </div>
        </el-col>
    <!-- 列表end -->


    <!-- 详细信息 -->
		<el-dialog title="详细信息" :visible.sync="consultationVisible" @close="initData">
            <el-form :label-position="'left'" label-width="150px" >
                <el-form-item label="审核状态" >
                    <div>111</div>
                </el-form-item>
                <el-form-item label="logo" >
                    <div> <img src="https://ciy.oss-cn-shenzhen.aliyuncs.com//web/bibiji/2020/2/12/ededff219ce3963a786cc3047944a444.jpg" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
                </el-form-item>
                <el-form-item label="单位名称" >
                    <div>凤飞飞</div>
                </el-form-item>
                <el-form-item label="联系方式" >
                    <div>123123123123</div>
                </el-form-item>
                <el-form-item label="单位地址" >
                    <div>研究室</div>
                </el-form-item>
                
                <el-form-item label="业务范围" >
                    <div>111</div>
                </el-form-item>
                <el-form-item label="单位简介" >
                    <div>辅导教材</div>
                </el-form-item>
                <el-form-item label="法定代表人" >
                    <div>辅导教材</div>
                </el-form-item>
                <el-form-item label="营业执照" >
                    <div>辅导教材</div>
                </el-form-item>
                <el-form-item label="统一社会信用代码" >
                    <div>是</div>
                </el-form-item>
                <el-form-item label="创建时间" >
                    <div>111</div>
                </el-form-item>
                
                
            </el-form>
		</el-dialog>
        <!-- 详细信息end -->

        <!-- 在职证明 -->
        <el-dialog title="在职证明" :visible.sync="licenseVisible" @close="initData">
            <el-form :label-position="'left'" label-width="150px" >
                    <div align="center"> <img :src="licenseImg" alt="" style="max-width:400px;margin:0 auto"></div>
            </el-form>
        </el-dialog>  
        <!-- 在职证明end -->
    </div>
</template>
<script>
export default {
    name:'member',
    data() {
        return {
            licenseImg:'',//营业执照
            consultationVisible:false,//查看详细信息状态
            goodAtVisible:false,
            licenseVisible:false,

            searchText:'',
            userAuthId:'',//选中的用户id

            authStatusOption:'',//头部筛选认证状态
            authStatusOptions:[
                {label:'全部',value:-1},
                {label:'待处理',value:0},
                {label:'通过',value:1},
                {label:'拒绝',value:2}

            ],
            
            tableData: [{}],
            page:1,
            totalPage:0    
        }
    },
    watch: {

    },
    methods: {

        search(){
            this.page=1;
            this.getUnitAuthList()
        },
        async getUnitAuthList(){
            //获取会员列表
            let params={
                page:this.page,
                limit:16,
                keyword:this.searchText,
                is_auth:this.authStatusOption==-1?'':this.authStatusOption
            }
            let res=await this.$api.getUnitAuthList(
                params);
            if(res.data.level=='success'){
                this.tableData=res.data.data;
                this.totalPage=res.data.page_info.total;
            }
        },
        pageChange(e){
			//翻页
			this.page=e;
			this.getUnitAuthList();
        },
        async deletApplication(id){
            //删除
            let judge=null;
            let tit='删除该申请?';
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            console.log(judge)
        },
        async passApplication(id){
            //通过审核
            let judge=null;
            let tit='通过该申请?';
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge=='confirm'){
                this.changeUnitAuthStatus(id)
            }
            console.log(judge)
        },
        async denyApplication(id){
            //拒绝审核
            let judge=null;
            let tit='拒绝该申请?';
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge=='confirm'){
                this.changeUnitAuthStatus(id,'refusal')
            }
            console.log(judge)
        },
        async changeUnitAuthStatus(id,type){
            let params={
                id:id,
                type:type
            }
            let res =await this.$api.changeUnitAuthStatus(params)
            if(res.data.level=='success'){
                this.$message.success(res.data.message);            
                this.getUnitAuthList()
            }else{
                this.$message.error(res.data.message);
            }
        },
        showLicense(scope){
            //显示营业执照
            this.licenseVisible=true;
            this.licenseImg=scope.license_img_url
        },
        showConsultation(){
            //显示申请信息
            this.consultationVisible=true
        },
        initData(){

        }

    },
    mounted() {
        this.getUnitAuthList()
    },
}
</script>
<style lang="scss" scoped>
    .screen{
          margin-top: -10px !important;
      }
      .action-bar-wrapper{
          position: sticky;
            z-index: 1;
            top:-20px;
      }
    .action-bar{
			background-color: #f2f2f2;
            
			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .task-form-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}


</style>